// @ts-nocheck
/*
 * @Descripttion: 胡腾辉 | feico
 * @version: V1.0
 * @Author: feico
 * @Date: 2022-02-20 09:17:01
 * @LastEditors: feico
 * @LastEditTime: 2022-02-22 15:35:47
 */
import React from 'react'
import {Card,Form, Input, Button, Checkbox, message} from 'antd'
import logo from '../../assets/logo.png'
import './index.scss'
import {useDispatch} from 'react-redux'
import { useState } from 'react'
import {useHistory,useLocation} from 'react-router-dom'
import {login} from '../../store/action/login.js'

export default function Login() {
    const dispatch = useDispatch()
    const history = useHistory()
    const location = useLocation()
    const [loading,setLoading] = useState(false)
    const onFinish =async (values) =>{
        setLoading(true)
        const {agree,...rest} = values
        try{
           await dispatch(login(rest))
           setLoading(false)
           message.success('登录成功',1,()=>{
            history.push(location.state?.from ? location.state.from : '/home')
           })
        }catch(e){
            if(!e.response?.data?.message) return setLoading(false)
            message.error(e.response?.data?.message || '登录失败',1,()=>{
                setLoading(false)
            })
        }
        
    }
        return (
        <div className='login'>
            <Card className='login-container'> 
                <img className='login-logo' src={logo} alt="极客园" />
                <Form autoComplete="off" size="large" validateTrigger={['onChange','onBlur']}
                initialValues={{
                    mobile: '13911111111',
                    code: '246810',
                    agree: true,
                }}
                onFinish={onFinish}
                >
                <Form.Item name='mobile' rules={[
                    {
                        required:true,
                        message:'手机号必填'
                    },
                    {
                        pattern:/^1[3-9]\d{9}$/,
                        message:'手机号格式错误'
                    }
                ]}>
                    <Input maxLength={11}/>
                </Form.Item>

                <Form.Item name='code' rules={[
                    {
                        required:true,
                        message:'验证码必填'
                    },
                    {
                        pattern:/^\d{6}$/,
                        message:'验证码格式错误'
                    }
                ]}>
                    <Input maxLength={6}/>
                </Form.Item>

                <Form.Item name='agree' valuePropName='checked' rules={[
                    {
                      validator:(_,value)=>{
                         return value ? Promise.resolve() : Promise.reject(new Error('请勾选协议'))
                      }
                    }
                ]}>
                    <Checkbox name='agree'>我已阅读并同意[隐私条款]和[用户协议]</Checkbox>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" block loading={loading}>
                    登录
                    </Button>
                </Form.Item>
                </Form>
            </Card>
        </div>
            )
}